:root {
  --border-width: 2px;
}

.component {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(var(--gap-3xl) * 9.5);
  height: var(--gap-3xl);
  padding: 0 var(--gap-base);
  color: var(--white-accent-clr);
  border-radius: calc(var(--gap-lg) / 3);
}

.content {
  display: flex;
  gap: var(--gap-main);
  align-items: center;
}

.alternative {
  color: var(--clr-nav-main);
  border: var(--border-width) solid var(--clr-nav-main);
}

.negative {
  background-color: var(--clr-accent-danger);
}

.positive {
  background-color: var(--clr-accent-success);
}

.default {
  background-color: var(--clr-nav-main);
}
